﻿<Page x:Class="NewMarkersSample.Pages.BarChartPage"
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	  xmlns:d3="http://research.microsoft.com/DynamicDataDisplay/1.0"
	  xmlns:local="clr-namespace:NewMarkersSample.Pages" Loaded="Page_Loaded"
	Title="Bar Chart">
	<Grid>
		<Grid.RowDefinitions>
			<RowDefinition Height="*"/>
			<RowDefinition Height="Auto"/>
		</Grid.RowDefinitions>

		<d3:ChartPlotter Name="plotter" Visible="-1,-0.1 11,5">
			<d3:ChartPlotter.Resources>
				<local:HeightToFillConverter x:Key="converter"/>
				<local:TooltipConverter FormatString="[0:F2]: [1:F2]->[2:F2]" x:Key="tooltipConverter"/>
				<d3:BrushHSBConverter SaturationDelta="0.8" LightnessDelta="1.6" x:Key="lighterConverter"/>
				<d3:BackgroundToForegroundConverter x:Key="backToForeConv"/>
			</d3:ChartPlotter.Resources>

			<d3:BarChart Name="barChart" IndependentValuePath="X" DependentValuePath="YMin">
				<d3:TemplateMarkerGenerator>
					<DataTemplate>
						<Rectangle Width="30" Fill="{Binding YMax, Converter={StaticResource converter}}"
								   d3:ViewportPanel.Y="{Binding YMin}" 
								   d3:ViewportPanel.X="{Binding X}"
								   d3:ViewportPanel.ViewportHeight="{Binding YMax}"
								   d3:ViewportPanel.ViewportVerticalAlignment="Bottom">
							<!--<d3:LiveToolTipService.ToolTip>
								<d3:LiveToolTip BorderBrush="DarkGray" Background="{d3:SelfBinding Path=Owner.Fill, Converter={StaticResource lighterConverter}}"
												TextBlock.Foreground="{d3:SelfBinding Path=Owner.Fill, Converter={StaticResource backToForeConv}}">
									<TextBlock>
										<TextBlock.Text>
											<MultiBinding Converter="{StaticResource tooltipConverter}">
												<Binding Path="X"/>
												<Binding Path="YMin"/>
												<Binding Path="YMax"/>
											</MultiBinding>
										</TextBlock.Text>
									</TextBlock>
								</d3:LiveToolTip>
							</d3:LiveToolTipService.ToolTip>-->
						</Rectangle>
					</DataTemplate>
				</d3:TemplateMarkerGenerator>
			</d3:BarChart>

			<Grid Canvas.Top="10" Canvas.Left="10">
				<Rectangle RadiusX="2" RadiusY="2" Stroke="LightGray" StrokeThickness="1" Fill="White" Opacity="0.7"/> 
				<TextBlock Margin="5" FontSize="14">Try to move <Run Foreground="Green">mouse</Run> over animated bars.</TextBlock>
			</Grid>
			
		</d3:ChartPlotter>
	</Grid>
</Page>
